<template>
  <div class="common-container">
    <main-title />
    <div class="content-wrap">
      <div v-loading="roleLoading" element-loading-background="transparent" class="role-list">
        <div class="role-group">
          <div class="role-group__title">系统角色</div>
          <div
            v-for="sysRole in roleData.sysRole"
            :key="sysRole.rid"
            class="role-item"
            :class="{ 'is-active': sysRole.rid === currentRole.rid }"
            @click="getMenu(sysRole)"
          >
            <div>{{ sysRole.name }}</div>
          </div>
          <div></div>
        </div>
        <div class="role-group">
          <div class="role-group__title">预定义角色</div>
          <div
            v-for="defRole in roleData.defRole"
            :key="defRole.rid"
            class="role-item"
            :class="{ 'is-active': defRole.rid === currentRole.rid }"
            @click="getMenu(defRole)"
          >
            <div>{{ defRole.name }}</div>
          </div>
          <div></div>
        </div>
        <div class="role-group">
          <div class="role-group__title">项目角色</div>
          <div
            v-for="tempRole in roleData.tempRole"
            :key="tempRole.rid"
            class="role-item"
            :class="{ 'is-active': tempRole.rid === currentRole.rid }"
            @click="getMenu(tempRole)"
          >
            <div>{{ tempRole.name }}</div>
          </div>
          <div></div>
        </div>
      </div>
      <div v-loading="menuLoading" element-loading-background="transparent" class="menu-list">
        <div class="role-name">{{ currentRole.name }}</div>
        <el-tree
          v-if="currentRole.name"
          :data="menuTree"
          :props="defaultProps"
          default-expand-all
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs } from 'vue'

import { getMenuTree } from '@/api/backend/menu'
import RoleApi from '@/api/backend/role'

import { MainTitle } from '&/mixins/useComponent'
import IBaseObj from '#/index'

const defaultProps = {
  children: 'children',
  label: 'title',
}
const state: IBaseObj = reactive({
  roleData: {},
  menuTree: [],
  currentRole: {},
  roleLoading: false,
  menuLoading: false,
})
const { roleData, menuTree, currentRole, roleLoading, menuLoading } = toRefs(state)
const getRoleList = async () => {
  state.roleLoading = true
  try {
    const ret: any = await RoleApi.getDefaultRolesList()
    state.roleData = ret || {}
    // state.currentRole = ret.sysRole[0]?.rid
    if (ret.sysRole[0]) {
      getMenu(ret.sysRole[0])
    }
  } finally {
    state.roleLoading = false
  }
}
getRoleList()

const getMenu = async (role: IBaseObj) => {
  state.menuLoading = true
  try {
    const ret: any = await getMenuTree({ rid: role.rid })
    if (ret.data) {
      state.menuTree = ret.data
    } else {
      state.menuTree = []
    }

    state.currentRole = role
  } finally {
    state.menuLoading = false
  }
}
</script>

<style lang="scss" scoped>
.content-wrap {
  display: flex;
  height: calc(100vh - 70px);
}

.role-list {
  width: 30%;
  height: 100%;
  overflow: auto;
  @include scroll-bar;
}

.menu-list {
  padding: 0 20px;
  flex: 1;

  .el-tree {
    background: transparent;

    :deep() {
      .el-tree-node {
        &__label {
          font-size: 16px;
        }
      }
    }
  }
}

.role {
  &-group {
    margin-bottom: 10px;

    &__title {
      font-size: 18px;
      font-weight: 600;
      line-height: 32px;
    }
  }

  &-name {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    line-height: 32px;
  }
}

.role-item {
  padding-left: 20px;
  line-height: 32px;
  cursor: pointer;

  &:hover {
    background: var(--card-hover-background);
  }

  &.is-active {
    background: var(--card-active-background);
  }
}
</style>
